<template>
    <div class="breadcrumbs-box">
        <v-breadcrumbs color="primary" :items="currentRouteList">
            <template v-slot:divider>
                <svg-icon iconClass="breadcrumbs-right" size="16"></svg-icon>
            </template>
            <template v-slot:title="{ item }">
                <div class="text-[12px] leading-[21px]" :class="{
                    'cursor-pointer': item.path != currentRoute.path,
                    'cursor-default': item.path == currentRoute.path,
                    'text-text--disabled': item.path == currentRoute.path
                }" @click="jump(item)">{{ item.title }}</div>
            </template>
        </v-breadcrumbs>
    </div>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue';

import { useCurrentInstance } from "@Hooks/index.ts";
const proxy = useCurrentInstance().proxy;

const currentRoute = ref<any>({});
const currentRouteList = ref<any>([]);

watch(() => proxy.$router.currentRoute.value, (newVal) => {
    currentRoute.value = newVal;
    let arr = [];
    for (let item of newVal.matched) {
        if (item.path != "/") {
            arr.push({
                title: item.meta.label,
                disabled: currentRoute.value.path == item.path,
                name: item.name,
                path: item.path,
                meta: item.meta,
                redirect: item.redirect
            })
        }
    }
    currentRouteList.value = arr;
}, {
    immediate: true
})

// 路由跳转
function jump(item: any) {
    let path = item.redirect ? '/' + item.redirect : item.path;
    if (currentRoute.value.path != path) {
        proxy.$router.push({ path: path });
    }
}

</script>

<style scoped>
.breadcrumbs-box :deep(.v-breadcrumbs-item--disabled) {
    color: rgb(var(--v-theme-text--disabled)) !important;
}

.breadcrumbs-box :deep(.v-breadcrumbs-divider) {
    padding-left: 12px !important;
    padding-right: 12px !important;
}

.breadcrumbs-box :deep(.v-breadcrumbs-item) {
    padding: 0 !important;
}

.breadcrumbs-box :deep(.v-breadcrumbs) {
    padding-left: 8px;
    padding-right: 8px;
}
</style>